import React, { useState, useMemo } from "react"
import { Pagination, Input } from 'antd'
import './style/partners.less'
import Navbar from "../components/Navbar"
import Header from "../components/Header"
import Footer from "../components/Footer"
import { properties, tags, partners } from '../config/partners'
const { Search } = Input


export default function () {

    const pageSize = 16
    const [activeIdxProperty, setActiveIdxProperty] = useState(0)
    const [activeIdxTag, setActiveIdxTag] = useState(0)
    const [currPage, setCurrPage] = useState(1)
    const [kw, setKw] = useState('')
    const _partners = useMemo(() => {
        let arr = partners
        if (kw) {
            arr = arr.filter(partner => partner.name.includes(kw))
        }
        if (properties[activeIdxProperty] !== '不限') {
            arr = arr.filter(partner => partner.properties.includes(properties[activeIdxProperty]))
        }
        if (tags[activeIdxTag] !== '不限') {
            arr = arr.filter(partner => partner.tags.includes(tags[activeIdxTag]))
        }
        return arr
    }, [partners, kw, activeIdxProperty, activeIdxTag])

    const onSearch = () => {

    }

    return <div className='p-partners'>
        {/* 头部 */}
        <Header />
        {/* banner */}
        <div className='banner'>
            <Navbar />
        </div>
        <div className='content'>
            <div className="subContainer">
                <div className='goBack'><a href='/'>&lt;&lt; <span className='text'>合作单位</span></a></div>
                <Search placeholder="直接输入名称，搜索更多合作伙伴" onSearch={onSearch} enterButton value={kw} onChange={e => setKw(e.target.value)} />
                <div className='properties'>
                    <label >性质：</label><ul>{properties.map((property, idx) =>
                        <li className={idx === activeIdxProperty ? 'active' : ''} key={property} onClick={e => setActiveIdxProperty(idx)}>{property}</li>
                    )}</ul>
                </div>
                <div className='tags'>
                    <label >标签：</label><ul>{tags.map((tag, idx) =>
                        <li className={idx === activeIdxTag ? 'active' : ''} key={tag} onClick={e => setActiveIdxTag(idx)}>{tag}</li>
                    )}</ul>
                </div>
                <div className="partners">
                    <div className='totalNum'>共{partners.length}家合作单位</div>
                    <ul className='list'>{_partners.slice((currPage - 1) * pageSize, currPage * pageSize).map(item =>
                        // 等使用真实数据后此处的key需要修理 
                        <li title={item.name} key={item.name + Math.random()} style={{ backgroundColor: item.bg ? '#d91c18' : '#fff' }}>
                            <a href={item.link} target='_blank'><div className='img' style={{ backgroundImage: `url(${item.img})` }} /></a>
                        </li>
                    )}</ul>
                    <div className='paginationWrap'>

                        <Pagination
                            current={currPage}
                            defaultPageSize={pageSize}
                            total={_partners.length}
                            onChange={(page, pageSize) => setCurrPage(page)}
                        />
                    </div>
                </div>
            </div>

        </div>

        <Footer />
    </div>
}